<template>
  <div class="wrapper">

        <!-- header part -->
        <header>
            <p>在线支付</p>
        </header>

        <!-- 订单信息部分 -->
        <h3>订单信息：</h3>
        <div class="order-info">
            <p>
                {{orders.business.businessName}}
                <i class="fa fa-caret-down" @click="detailetShow"></i>
            </p>
            <p>&#165;{{orders.orderTotal}}</p>
        </div>

        <!-- 订单明细部分 -->
        <ul class="order-detailet" v-show="isShowDetailet">
            <li v-for="item in orders.list">
                <p>{{item.food.foodName}} x {{item.quantity}}</p>
                <p>&#165;{{item.food.foodPrice*item.quantity}}</p>
            </li>
            <li>
                <p>配送费</p>
                <p>&#165;{{orders.business.deliveryPrice}}</p> 
            </li>
        </ul>

        <!-- 支付方式部分 -->
        <ul class="payment-type">
            <li>
                <img src="../assets/img/alipay.png">
                <i class="fa fa-check-circle"></i>
            </li>
            <li>
                <img src="../assets/img/wechat_pay.png">
            </li>
        </ul>
        <div class="payment-button">
            <button>确认支付</button>
        </div>

        <!-- 底部菜单部分 -->
        <Footer></Footer>
    </div>
</template>

<script>
import Footer from '../components/Footer.vue';

export default {
    name: 'Payment',
    data() {
        return {
            orderId: this.$route.query.orderId,
            orders: {
                business:{}
            },
            isShowDetailet:false
        }
    },
    created() {
        this.$axios.post('OrdersController/getOrdersById',this.$qs.stringify({
            orderId:this.orderId
        })).then(response => {
            this.orders = response.data;
        }).catch(error => {
            console.error(error);
        });
    },
    mounted() {
        //这里的代码是实现：一旦路由到在线支付组件，就不能回到订单确认组件。
        //先将当前url添加到history对象中
        history.pushState(null,null,document.URL);
        //popstate事件能够监听history对象的变化
        window.onpopstate = () => {
            this.$router.push({path:'/index'});
        }
    },
    destroyed() {
        window.onpopstate = null;
    },
    methods: {
        detailetShow() {
            this.isShowDetailet = !this.isShowDetailet;
        }
    },
    components: {
        Footer
    }
}
</script>

<style scoped>
/****************** 总容器 ******************/
.wrapper{
    width: 100%;
    height: 100%;
   }

/****************** header部分 ******************/
.wrapper header{
    width: 100%;
    height: 12vw;
    background-color: #0097FF;
    color: #fff;
    font-size: 4.8vw;
    
    position: fixed;
    left: 0;
    top: 0;
    z-index: 1000;
    
    display: flex;
    justify-content: center;
    align-items: center;
}

/****************** 订单信息部分 ******************/
.wrapper h3{
    margin-top: 12vw;
    box-sizing: border-box;
    padding: 4vw 4vw 0;
    
    font-size: 4vw;
    font-weight: 300;
    color: #999;
}
.wrapper .order-info{
    box-sizing: border-box;
    padding: 4vw;
    font-size: 4vw;
    color: #666;
    
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.wrapper .order-info p:last-child{
    color: orangered;
}

/****************** 订单明细部分 ******************/
.wrapper .order-detailet{
    width: 100%;
}
.wrapper .order-detailet li{
    width: 100%;
    box-sizing: border-box;
    padding: 1vw 4vw;
    
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.wrapper .order-detailet li p{
    font-size: 3vw;
    color: #666;
}

/****************** 支付方式部分 ******************/
.wrapper .payment-type{
    width: 100%;
}
.wrapper .payment-type li{
    width: 100%;
    box-sizing: border-box;
    padding: 4vw;
    
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.wrapper .payment-type li img{
    width: 33vw;
    height: 8.9vw;
}
.wrapper .payment-type li .fa-check-circle{
    font-size: 5vw;
    color: #38CA73;
}
.wrapper .payment-button{
    width: 100%;
    box-sizing: border-box;
    padding: 4vw;
}
.wrapper .payment-button button{
    width: 100%;
    height: 10vw;
    border: none;
    /*去掉外轮廓线*/
    outline: none;
    border-radius: 4px;
    background-color: #38CA73;
    color: #fff;
}

</style>